<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/WEB-INF/tlds/messageTag.tld" prefix="msg"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title><msg:message key="menu.user" /></title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="description" content="客户管理">
	<!-- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
	
	<!-- 底部加载js -->
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<!-- 底部加载js -->
	<!-- bootstrap 引入 -->
	<script src="${pageContext.request.contextPath}/js/tether.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<!-- 引入弹窗 layer -->
	<script src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
	<script src="${pageContext.request.contextPath}/js/page/common.js"></script>
	<script type="text/javascript">
	function goToaddUser() {
		location.href = "${pageContext.request.contextPath}/gotoAddUser.do";
	}
	function roleMgr() {
		location.href = "${pageContext.request.contextPath}/showRoleList.do";
	}
	</script>
  </head>
  
  <body>
  	<div class="header">
		<div class="left header-logo"><img class="header-logo-img" src="images/header_logo.png" /></div>
		<div class="right header-nav">
			<a class="nav-link" href="${pageContext.request.contextPath }/main.do">
				<i class="icon icon-home"></i>
				<span class="link-text"><msg:message key="menu.homepage" /></span>
			</a>
			<c:if test="${menubean.menu1 }">
			<a class="nav-link" href="${pageContext.request.contextPath }/showDevice.do">
				<i class="icon icon-install"></i>
				<span class="link-text"><msg:message key="menu.install" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu2 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showConfig.do">
				<i class="icon icon-config"></i>
				<span class="link-text"><msg:message key="menu.config" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu3 }">
			<!-- <a class="nav-link" href="operation.html">
				<i class="icon icon-operation"></i>
				<span class="link-text">操作</span>
			</a> -->
			<a class="nav-link" href="${pageContext.request.contextPath}/dataNew.do">
				<i class="icon icon-data"></i>
				<span class="link-text"><msg:message key="menu.data" /></span>
			</a>
			</c:if>
			<%-- <c:if test="${menubean.menu4 }">
			<a class="nav-link" href="history.html">
				<i class="icon icon-history"></i>
				<span class="link-text">历史</span>
			</a>
			</c:if> --%>
			<c:if test="${menubean.menu4 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/faultList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text"><msg:message key="menu.error" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu5 }">
			<a class="nav-link active" href="${pageContext.request.contextPath}/showUserList.do">
				<i class="icon icon-customer-management"></i>
				<span class="link-text"><msg:message key="menu.user" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu6 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/statusList.do">
				<i class="icon icon-status"></i>
				<span class="link-text"><msg:message key="menu.status" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu7 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/currentList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text"><msg:message key="menu.current" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu8 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/report.do">
				<i class="icon icon-history"></i>
				<span class="link-text"><msg:message key="menu.report" /></span>
			</a>
			</c:if>
			<a class="nav-link" href="${pageContext.request.contextPath}/logout.do">
				<i class="icon icon-out"></i>
				<span class="link-text"><msg:message key="menu.exit" /></span>
			</a>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
	
  	<!-- <input type="button" value="添加用户" onclick="goToaddUser()"> -->
  	<%-- <table id="tab_user"  width="100%" border="1" cellpadding="0" cellspacing="0">
		<tr>
		  <th width="10%" nowrap="nowrap">用户名</th>
		  <th width="15%" nowrap="nowrap">真实姓名</th>
		  <th width="15%" nowrap="nowrap">公司名称</th>
		  <th width="15%" nowrap="nowrap">电话</th>
		  <th width="15%" nowrap="nowrap">创建时间</th>
		  <th width="15%" nowrap="nowrap" >状态</th>
		  <th width="15%" nowrap="nowrap">操作</th>
		</tr>
		<c:forEach items="${userList }" var="user">
		<tr>
			<td>${user.username }</td>
			<td>${user.realName }</td>
			<td>${user.company }</td>
			<td>${user.mobile }</td>
			<td>${user.createTime }</td>
			<td>${user.state }</td>
			<td><a>修改</a> <a>删除</a></td>
		</tr>
		</c:forEach>
  	</table> --%>
  	
  	<div class="block20"></div>
	<div class="page-mainbox">

		<div>
			<button class="btn btn-primary" id="addMemberBtn"><msg:message key="user.btn.adduser" /></button>
			<button class="btn btn-warning" onclick="roleMgr()"><msg:message key="role.btn.mgr" /></button>
		</div>
		<div class="block20"></div>

		<table class="table table-striped table-hover  bg-white">
			<thead>
				<tr>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.company" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.username" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.realname" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.mobile" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.email" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.addr" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.remark" /></th>
					<th style="text-align: left;padding-left:15px;"><msg:message key="user.operation" /></th>
				</tr>
			</thead>
			<tbody>
			<c:forEach items="${userList }" var="user">
				<tr>
					<td>${user.company }</td>
					<th>${user.username }</th>
					<th>${user.realName }</th>
					<td>${user.mobile }</td>
					<td>${user.email }</td>
					<td>${user.address }</td>
					<td>${user.remark }</td>
					<td>
						<div class="td-oper-div">
							<button class="btn btn-primary" name="memberEditLiBtn" data-id="${user.userId }"><msg:message key="user.btn.editor" /></button>
							<button class="btn btn-danger" name="memberDelLiBtn" data-id="${user.userId }"><msg:message key="user.btn.delete" /></button>
						</div>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
	</div>
	
	<div class="block20"></div>

	<!-- <div>
		<nav aria-label="Page navigation example">
			<ul class="pagination justify-content-center">
				<li class="page-item disabled">
				<a class="page-link" href="#" tabindex="-1">上一页</a>
				</li>
				<li class="page-item"><a class="page-link" href="#">1</a></li>
				<li class="page-item"><a class="page-link" href="#">2</a></li>
				<li class="page-item"><a class="page-link" href="#">3</a></li>
				<li class="page-item">
				<a class="page-link" href="#">下一页</a>
				</li>
			</ul>
		</nav>
	</div> -->


	<div class="hide" id="memberLayer">
		<div class="form-view padding20">
			<form id="memberForm">
			<div class="item-group2">
				<div class="item-li">
					<div class="item-view item100">
						<span class="item-title"><msg:message key="user.realname" /></span>
						<input type="hidden" id="userId" name="userId" />
						<input type="text" class="text" id="realName" name="realName"  maxlength="20"/>
					</div>
				</div>
				<div class="item-li">
					<div class="item-view item100">
						<span class="item-title"><i class="tag-must">*</i><msg:message key="user.username" /></span>
						<input type="text" class="text" id="username" name="username" maxlength="20"/>
					</div>
				</div>
				<div class="clear"></div>
			</div>

			<div class="block10"></div>
			
			<div class="item-group2">
				<div class="item-li">
					<div class="item-view item100">
						<span class="item-title"><i class="tag-must">*</i><msg:message key="user.pwd" /></span>
						<input type="text" class="text" id="password" name="password" maxlength="20" />
					</div>
				</div>
				<div class="item-li">
					<div class="item-view item100">
						<span class="item-title"><i class="tag-must">*</i><msg:message key="user.company" /></span>
						<input type="text" class="text" id="company" name="company" maxlength="20"/>
					</div>
				</div>
				<div class="clear"></div>
			</div>

			<div class="block10"></div>

			<div class="item-group2">
				<div class="item-li">
					<div class="item-view item100">
						<span class="item-title"><i class="tag-must">*</i><msg:message key="user.mobile" /></span>
						<input type="text" class="text" id="mobile" name="mobile" maxlength="11"/>
					</div>
				</div>
				<div class="item-li">
					<div class="item-view item100">
						<span class="item-title"><i class="tag-must">*</i><msg:message key="user.email" /></span>
						<input type="text" class="text" id="email" name="email"/>
					</div>
				</div>
				<div class="clear"></div>
			</div>

			<div class="block10"></div>

			<div class="item-view item100">
				<span class="item-title"><msg:message key="user.addr" /></span>
				<input type="text" class="text" id="address" name="address"/>
			</div>
			
			<div class="block10"></div>
			<div class="item-view item100">
				<span class="item-title"><msg:message key="user.father" /></span>
				<select class="select" name="fatherId" id="fatherId">
					<option value="0">==请选择==</option>
					<c:forEach items="${userList }" var="user">
						<option value="${user.userId }">${user.company }-${user.realName }(姓名)-${user.mobile }</option>
					</c:forEach>
  				</select>
			</div>
			
			<div class="block10"></div>
			<div class="item-view item100">
				<span class="item-title"><msg:message key="user.role" /></span>
				<div class="view-cont">
				<c:forEach items="${roleList }" var="roleBean">
				<span class="li-check-item">
						<input type="checkbox" class="checkbox" id="role${roleBean.roleId }" name="role" value="${roleBean.roleId }">
						<label class="li-text" for="role${roleBean.roleId }">${roleBean.roleName }</label>
					</span>
	  			</c:forEach>
	  			</div>
			</div>

			<div class="block10"></div>
			<div class="item-view item100">
				<span class="item-title"><msg:message key="user.remark" /></span>
				<textarea id="remark" name="remark" class="textarea"></textarea>
			</div>
			<input class="hide" type="reset" name="resetBtn">
			</form>
		
		</div>
	</div>

	<script type="text/javascript">
		// 添加用户校验
		function addUser() {
			var username = $("#username").val();
			if(username=="") {
				alert("用户名不能为空！");
				return false;
			}
			
			var password = $("#password").val();
			if(password=="") {
				alert("密码不能为空！");
				return false;
			}
			
			var realName = $("#realName").val();
			var company = $("#company").val();
			var address = $("#address").val();
			var remark = $("#remark").val();
			var fatherId = $("#fatherId").val();
			
			var mobile = $("#mobile").val();
			if(mobile.length!=11) {
				alert("请输入正确的手机号码！");
				return false;
			}
			
			var email = $("#email").val();
			if(email=="") {
				alert("请输入E-mail地址！");
				return false;
			}
			
			var role = "";
			var roleArr = document.getElementsByName("role");
			for(var i=0;i<roleArr.length;i++) {
				if(roleArr[i].checked==true) {
					var roleId = roleArr[i].value;
					role += roleId + ",";
				}
			}
			
			if(role=="") {
				alert("请选择用户角色");
				return false;
			}
			
			var addUserRes = false;
			/* realName : realName,
			company : company,
			mobile : mobile,
			email : email,
			address : address,
			remark : remark,
			fatherId : fatherId,
			password : password,
			role : role */
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath }/addUser.do",
				async: false,
				dataType : "json",
				data : {
					username : username,
					realName : realName,
					company : company,
					mobile : mobile,
					email : email,
					address : address,
					remark : remark,
					fatherId : fatherId,
					password : password,
					role : role
				},
				success : function(data) {
					if(data.success==0) {
						addUserRes = true;
						alert(data.msg);
						layer.closeAll();
						location.href="${pageContext.request.contextPath}/showUserList.do";
					}else {
						alert(data.msg);
						addUserRes = false;
					}
				}
			});
			
			return addUserRes;
		}
		// 添加用户
		$('#addMemberBtn').click(function(){
			$('#memberForm [name="resetBtn"]').trigger('click');
			layer.open({
				type: 1,
				title: '添加用户',
				area:['700px','450px'],
				content: $('#memberLayer'),
				btn:['<msg:message key="btn.confirm" />','<msg:message key="btn.cancel" />'],
				yes:function(index){
					var res = addUser();
					if(res==true) {
						layer.close(index);
					}
				}
			});
		});

		// 修改用户
		function updateUser() {
			var userId = $("#userId").val();
			if(userId=="") {
				alert("数据异常");
				return false;
			}
			
			var username = $("#username").val();
			if(username=="") {
				alert("用户名不能为空！");
				return false;
			}
			
			var password = $("#password").val();
			if(password=="") {
				alert("密码不能为空！");
				return false;
			}
			
			var realName = $("#realName").val();
			var company = $("#company").val();
			var address = $("#address").val();
			var remark = $("#remark").val();
			var fatherId = $("#fatherId").val();
			
			var mobile = $("#mobile").val();
			if(mobile.length!=11) {
				alert("请输入正确的手机号码！");
				return false;
			}
			
			var email = $("#email").val();
			if(email=="") {
				alert("请输入E-mail地址！");
				return false;
			}
			
			var role = "";
			var roleArr = document.getElementsByName("role");
			for(var i=0;i<roleArr.length;i++) {
				if(roleArr[i].checked==true) {
					var roleId = roleArr[i].value;
					role += roleId + ",";
				}
			}
			
			if(role=="") {
				alert("请选择用户角色");
				return false;
			}
			
			var updateUserRes = false;
			/* realName : realName,
			company : company,
			mobile : mobile,
			email : email,
			address : address,
			remark : remark,
			fatherId : fatherId,
			password : password,
			role : role */
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath }/updateUser.do",
				async: false,
				dataType : "json",
				data : {
					userId : userId,
					username : username,
					realName : realName,
					company : company,
					mobile : mobile,
					email : email,
					address : address,
					remark : remark,
					fatherId : fatherId,
					password : password,
					role : role
				},
				success : function(data) {
					if(data.success==0) {
						updateUserRes = true;
						alert(data.msg);
						layer.closeAll();
						location.href="${pageContext.request.contextPath}/showUserList.do";
					}else {
						alert(data.msg);
						updateUserRes = false;
					}
				}
			});
			
			return updateUserRes;
		}
		
		var queryUserInfoB = false;
		// 编辑用户
		$('[name="memberEditLiBtn"]').click(function(){
			var _id = $(this).attr('data-id');
			$('#memberForm [name="resetBtn"]').trigger('click');
			// ajax 获取数据赋值
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath }/queryUserInfo.do",
				async: false,
				dataType : "json",
				data : {
					userId : _id
				},
				success : function(data) {
					if(data.success==0) {
						queryUserInfoB = true;
						$("#userId").val(data.user.userId);
						$("#username").val(data.user.username);
						$("#password").val("******");
						$("#realName").val(data.user.realName);
						$("#mobile").val(data.user.mobile);
						$("#company").val(data.user.company);
						$("#address").val(data.user.address);
						$("#email").val(data.user.email);
						$("#remark").val(data.user.remark);
						$("#fatherId").val(data.user.fatherId);
						
						for(var h=0;h<data.roleBeanList.length;h++) {
							$("input:checkbox[value='"+data.roleBeanList[h].roleId+"']").attr('checked','true');
						}
						
					}else {
						alert(data.msg);
						queryUserInfoB = false;
					}
				}
			});
			
			if(queryUserInfoB==false) {
				alert("网络异常，请重试");
				return;
			}
			
			layer.open({
				type: 1,
				title: '编辑用户',
				area:['700px','450px'],
				content: $('#memberLayer'),
				btn:['<msg:message key="btn.confirm" />','<msg:message key="btn.cancel" />'],
				yes:function(index){
					var updateRes = updateUser();
					if(updateRes==true) {
						layer.close(index);						
					}
				}
			});
		});
		
		// 编辑用户
		$('[name="memberDelLiBtn"]').click(function(){
			var _id = $(this).attr('data-id');
			
			if(confirm("确认删除该用户？")==false) {
				return;
			}
			
			// ajax 获取数据赋值
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath }/delUserInfo.do",
				async: true,
				dataType : "json",
				data : {
					userId : _id
				},
				success : function(data) {
					if(data.success==0) {
						location.href="${pageContext.request.contextPath}/showUserList.do";
					}else {
						alert(data.msg);
					}
				}
			});
		});
		
	</script>
  </body>
</html>
